<template>
    <div class="mapIndex">
        <vae-map  :options="options"   id="map_zhjc"   @init-map="initMap" ></vae-map>
        <div class="menu_btm" style=" pointer-events: auto;    bottom: 3vh; position: fixed; z-index:99">
            <div class="menu_btn" v-for="(item,index) in btm_zhjc_menu_list" @click="typeClick(item)" @mouseover="item.hover=true" @mouseout="item.hover=false">
                <div :class="{'menu_btn_l':!item.hover,'menu_btn_l_hover':item.hover || contentView==item.name}"></div>

                <div :class="{'menu_btn_m_hover':item.hover || contentView==item.name,'menu_btn_m':!item.hover}">{{item.title}}</div>

                <div :class="{'menu_btn_rend':!item.hover,'menu_btn_rend_hover':item.hover || contentView==item.name}"></div>

                <div class="x_line" v-if="index != btm_zhjc_menu_list.length-1"></div>
            </div>
        </div>
        <div style="position: fixed; z-index: 2021;    right: 2px;top: 10vh">
            <div class="top" style="position: relative; display: flex; flex-direction: column">
                <div class="bg w-100" style="margin-bottom:4px;">
                    <div class="panel-title"><b></b>卫星图片<i></i></div>
                    <div class="panel-content" style="height: 12vh; padding:8px;"  >
                        <img v-if="imgSrc=='dxmk'" src="../../../public/images/mine/dxmk.png"  width="100%"  height="100%" alt="">
                        <img v-if="imgSrc=='tlpk'" src="../../../public/images/mine/tlpk.png"  width="100%"  height="100%" alt="">
                        <img v-if="imgSrc=='xsxgk'" src="../../../public/images/mine/xsxgk.png"  width="100%"  height="100%" alt="">
                    </div>
                </div>

                <div class="bg w-100 mt-0"  style="margin-top: 0;cursor: pointer;" >
                    <div class="panel-title"><b></b>视频监控<i></i></div>
                    <div style="padding:8px; overflow: hidden">
                        <div class="panel-content" style="height: 12vh;background-image:url('/vae/images/vedio1.png');background-size:100% 100%;cursor:pointer;">
                            <!-- <vaeIframe :url="'vedio/test.html'"></vaeIframe> -->

                        </div>
                    </div>

                </div>

            </div>
        </div>
        <div ref="mapPopup" v-show="false">
            <div>
                <el-row v-for="item in popupList">
                    <el-col :span="12">{{item.factor_name_2}}</el-col>
                    <el-col :span="12">{{item.factor_weights_2}}</el-col>
                </el-row>
            </div>
        </div>
    </div>
</template>

<script>
    const colorArr = {
        1:'#F56C6C',
        2:'#feac1b',
        3:'#ffe100',
        4:'#1CDDFF'
    }
    import  markers from './zhjc-api/markers'
    import {mk,qyzh,fmks,wh,yhbz} from './zhjc-api/qyzh'
    import {fmtc,mktc,qytc,whtc,yhbztc} from './zhjc-api/mapPopupData'
    import  geojson from "@/../public/mapJson/100000_full.json"
    import Vue from 'vue'
    import popupContent from './popup_pg.vue'
    import vaeIframe from '@/components/panel-iframe'
    export default {
        name: "map",
        components:{ vaeIframe },
        data() {
            return {
                tkShow:false,
                imgSrc:'xsxgk',//图片路径
                //底部分类
                btm_zhjc_menu_list:[
                    {title:'区域综合',hover:false,name:"qyzh"},
                    {title:'煤矿',hover:false,name:"mk"},

                    {title:'非煤矿山',hover:false,name:"fmks"},
                    {title:'危化',hover:false,name:"wh"},
                    {title:'烟花爆竹',hover:false,name:"yhbz"}
                ],
                contentView: "qyzh",
                fillTypeData:qyzh,
                options:{
                    zoom:3.5,
                    zoomDelta:0.2,
                },
                baseLayers:L.layerGroup(),
                map:null,
                markerLayers:L.layerGroup(),
                markerLayersIcon:L.layerGroup(),//煤矿的标点
                geojsonMap:L.layerGroup(),
                allMineData:[],
                tileLayer: L.layerGroup(),
                popupList:[],
                popupData:{},
            }
        },
        created(){
        },
        mounted() {

        },
        methods:{
            //底部类型点击 煤矿 非煤 烟花爆竹
            typeClick(item){
                this.contentView = item.name;
                console.log(item)
                 this.popupData=[];
                if(item.name=='mk'){
                    this.fillTypeData = mk
                    this.popupData = JSON.parse(JSON.stringify(mktc)); 

                    // this.markerLayersIcon.addTo(this.map);
                }else if(item.name=='qyzh'){
                    this.fillTypeData = qyzh
                    this.popupData =  JSON.parse(JSON.stringify(qytc)); 
                   //  this.map.removeLayer(this.markerLayersIcon);
                }else if(item.name=='fmks'){
                    this.fillTypeData = fmks
                    this.popupData = JSON.parse(JSON.stringify(fmtc)); 
                  //  this.map.removeLayer(this.markerLayersIcon)
                }else if(item.name=='wh'){
                    this.fillTypeData = wh
                    this.popupData =  JSON.parse(JSON.stringify(whtc))
                 //   this.map.removeLayer(this.markerLayersIcon)
                }else if(item.name=='yhbz'){
                    this.fillTypeData = yhbz
                    this.popupData =  JSON.parse(JSON.stringify(yhbztc))
                 //  this.map.removeLayer(this.markerLayersIcon)
                }
                console.log(  this.popupData,"popupData")
            //    this.fillTypeData = item.name
                this.initFillColor()
            },
            getFillColor(name){
                if(this.fillTypeData.predicts){
                    for(let i =0 ;i< this.fillTypeData.predicts.length;i++){
                        if(this.fillTypeData.predicts[i].province_name == name){
                            return colorArr[this.fillTypeData.predicts[i].predict_level]
                        }
                    }
                }

            },
            async initMap(v){
                this.map=v;
                this.tileLayer.addTo(v).bringBoBack;
                this.markerLayers.clearLayers();
                this.markerLayersIcon.clearLayers();
                this.baseLayers.clearLayers();
                this.markerLayers.addTo(this.map);
             //   this.markerLayersIcon.addTo(this.map);
                this.baseLayers.addTo(this.map)
                // this.baseLayers = new L.MarkerClusterGroupX({
                //     iconStyle: "blue"
                // }).addTo(this.map)
                this.initFillColor()
                this.addMarkers();


            },
            //增加标点
            addMarkers(){
                localStorage.setItem("cameraCode",markers[0].cameraCode)
                this.markerLayersIcon.clearLayers();
                markers.forEach(item =>{
                    let icon= L.glyphicon({
                        icon: 'none',
                        size: "16",//编译为width:24px,height:24px
                        fontSize: "12",
                        background: '#fa242f',
                        color: '#ffff',
                        borderRadius: 16,//跟size一样大为圆形
                        borderWidth: 1,
                        borderColor: "#fff",
                        boxShadow: true,
                        additionalCSS:'font-weight:bold;line-height:24px;',//会直接覆盖color和background设置的颜色
                        className: 'className',
                        effect: {
                            type: "halo",//设置'halo'则默认开启光晕效果
                            size: 60,//扩散的光晕的大小以长宽计算，建议大小至少在size的2倍
                            color: "rgba(255,255,255,0.6)",//扩散的光晕的颜色
                            interval: 3//动画的时长
                        }
                    });
                    let marker=  L.marker([item.latitude,item.longitude],
                        { riseOffset:300, interactive: true, draggable: false })
                        .setIcon(icon)
                        .addTo(this.markerLayersIcon)
                        .bindTooltip(item.name,{direction:'right',permanent:true}).openTooltip()
                    marker.name = item.name;
                    marker.on("click",(e)=>{
                        //图片和视频切换
                        if(e.sourceTarget.name=='西山斜沟矿'){
                            this.imgSrc = 'xsxgk'
                        }else if(e.sourceTarget.name=='大兴矿业'){
                            this.imgSrc = 'dxmk'

                        }else if(e.sourceTarget.name=='铜锣坪矿'){
                                 this.imgSrc = 'tlpk'
                        }
                        localStorage.setItem("cameraCode",item.cameraCode)
                    })
                })
            },

            //初始化色块图层
            initFillColor(){
                this.markerLayers.clearLayers();
                this.geojsonMap.clearLayers();
                this.geojsonMap=  L.geoJSON(geojson.features, {
                    style:(feature)=>{
                        return {
                            fillColor:this.getFillColor(feature.properties.name),
                            weight: 1,
                            opacity: 0.8,
                            color: '#0262ea',
                            dashArray: '1',
                            fillOpacity:0.8,
                            data:{},
                        }
                    },
                    onEachFeature: (feature, layer) =>{//遍历每一个数据，也就是为每一个地点加上监听器
                        let name = feature.properties.name.slice(0, 2);
                        let divIcon = L.divIcon({
                            html: `<div style="font-size: 3px;color: #fff">${name == '内蒙' || name == '黑龙' ? feature.properties.name.slice(0, 3) : name}</div>`,
                            className: 'text-light',
                            iconSize: [40, 16],
                        })
                        if (feature.properties.center) {
                           let marker=  L.marker([feature.properties.center[1] - 0.6, feature.properties.center[0] - 0.2], {riseOffset: 0, direction: 'left',interactive: true,  draggable: false }).setIcon(divIcon).addTo(this.markerLayers)
                           marker.bindPopup(this.popupContent(feature), { minWidth: 300,minHeight:400, closeButton: true })
                            // console.log(this.popupContent(feature))
                       //    layer.on({ mouseover: this.highlightFeature,  mouseout: this.resetHighlight, });
                        }
                        //   this.bindPopup(marker,v)

                        layer.on({
                            mouseover: this.highlightFeature,
                            mouseout: this.resetHighlight,
                            //click:this.clickProvince
                        });


                    },
                }).addTo(this.map);

                this.map.fitBounds(this.geojsonMap.getBounds());

            },
            popupContent(feature){
                let name =feature.properties.name;
                console.log(222,this.popupData)
                if(!this.popupData || !this.popupData.provinces){
                    this.popupData = qytc;
                }
                this.popupData.provinces.forEach((item,index) =>{
                    // console.log(item.province_name == name ,'----province_name==name');
                    if(item.province_name == name){
                        this.popupList = item.factors;
                    }
                })
                return this.createContent(this.popupList);
            },
            createContent(list){
                let maxValue = 0;
                // console.log(list)
                list.forEach(item =>{
                    if(item.factor_weights_2 > maxValue){
                        maxValue = item.factor_weights_2;
                    }
                })
                let content = "<div class='popup-div'>";
                list.forEach(item =>{
                    content += "<div class='popup-row'>" +
                                    "<div class='popup-col-left'>" + item.factor_name_2+ "</div>" +
                                    "<div class='popup-col-right'>" +
                                        "<div class='color-left'><div class='color-blue' style='width: "+ ((item.factor_weights_2 > 0? 0: (item.factor_weights_2 *-1)) / maxValue )*100 +"%'></div></div>" +
                                        "<div class='color-right'><div class='color-red' style='width: "+ ((item.factor_weights_2 < 0? 0: (item.factor_weights_2 *1)) / maxValue )*100 +"%'></div></div>" +
                                    "</div>" +
                                "</div>"
                })
                content += "</div>";
                return content;
            },
            clickProvince(e){
                let name = e.target.feature.properties.name;

                if(!this.popupData || !this.popupData.provinces){
                    this.popupData = mktc;
                }

                this.popupData.provinces.forEach(item =>{
                    if(item.procince_name == name){
                        this.popupList = item.factors;
                    }
                })

            },
            //公共样式
            resetHighlight(e) {//当鼠标退出后reset
                var layer = e.target;
                layer.closePopup();
                this.geojsonMap.resetStyle(e.target);//  geojson要先定义
            },
            highlightFeature(e) {//当鼠标拂过时高亮显示

                var layer = e.target;
                layer.openPopup();
                layer.setStyle({
                    weight: 1,
                    dashArray: '',
                    color: '#0723db',
                    fillOpacity:0.9,
                    fillColor: "#befaff"
                });
                if (!L.Browser.ie && !L.Browser.opera && !L.Browser.edge) {
                    layer.bringToFront();
                }
            },
            mapFillColor(feature,){
                return {
                    fillColor: this.getColor(feature.properties.adcode).color,
                    weight: 9,
                    opacity: 1,
                    color: 'red',
                    dashArray: '1',
                    fillOpacity: 0.7,
                    data:this.getColor(feature.properties.adcode).data
                }
            },
        }
    }
</script>

<style scoped lang="less">
    .iconMap{
        width: 2vw;
        height: 2vw;

    }
    .mapIndex{
        width: 100vw;
        height: 100vh;
        background: url("../../../public/images/indexBanner.png") no-repeat;
        background-size: 100%  100%;
    }
    .div-icon-bg{ background-color: transparent; border: none; font-size: 12px; color:#454545; font-weight: bold}
    .top{
        margin: 1vh;
        width: calc(25vw - 6vh);
        height:calc(100% - 2vh);
        height: calc(40%);
        position: relative;
        display: flex;
        background: none;
        padding: 1.5vh 3vh 0vh 0vh;
    .bg{
        /*height:100%;*/
        /*width: 100%;*/
        margin: 1vh;
        background-size: 100% 100%;
        background-position: center center;
        float: left;
        pointer-events: all;
        background: url("../../../public/images/panel_bg2.png") no-repeat;
        background-size: 100% 100%;
        margin-top: 1vh;
    .panel-title{
        font-size: 1.6vh;
        line-height: 1.0vh;
        color: #fff;
        text-align: center;
        color: #fff;
        margin-top: 1vh;
        /*margin-top: 1vh;*/
    b{
        display: inline-block;
        width: 2vh;
        height: 2vh;
        background: url("../../../public/images/zuo.png") no-repeat;
        background-size: contain;
        vertical-align: middle;
    }
    i{
        display: inline-block;
        width: 2vh;
        height: 2vh;
        background: url("../../../public/images/you.png") no-repeat;
        background-size: contain;
        vertical-align: middle;
    }
    }
    }
    }

</style>
<style>
    .leaflet-popup-content-wrapper, .leaflet-popup-tip{
        background: transparent;
        background: url("../../../public/images/panel_bg2.png") no-repeat;
        background-size: 100% 100%;
        box-shadow:none;
        color: #FFF8DC;

    }
    .popup-div{ padding-bottom: 16px;}
    .popup-row{
        width: 100%;
        height: 22px;
        line-height: 22px;
    }
    .popup-col-left{
        width: 100px;
        display: inline-block;
        text-align: right;
        padding-right: 16px;
        border-right: 1px solid #999ab1;

    }
    .popup-col-right{
        width: 180px;
        display: inline-block;
        position: relative;
        top: 10px;
    }
    .popup-col-right>div{
        width: 88px;
        height: 22px;
        display: inline-block;

    }
    .color-left{
        text-align: right;
        overflow: hidden;
    }
    .color-blue{
        display: inline-block;
        height: 12px;
        background-color: #30cdf5;
    }
    .color-right{
        text-align: left;
        overflow: hidden;
    }
    .color-red{
        display: inline-block;
        height: 12px;
        background-color: #dd4d49;
    }
</style>
